<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/WEB-INF/templates/empty_master_frame.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:my="http://java.sun.com/jsf/composite/components">
         
         <ui:define name="title"> - Areas</ui:define>                   
         
         <ui:define name="content">
         
         	<h6>Finden sie ihre passenden Qualitätsräder. </h6>
         	
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['CH-NE', 200],
          ['CH-AG', 300],
          ['CH-AI', 400],
          ['CH-AR', 500],
          ['CH-GR', 600],
          ['CH-ZH', 700]
        ]);

        var options = {region: 'CH', resolution:'provinces', 'backgroundColor':{
            'fill': '#FFFFFF',
            'stroke': 'white',
            'strokeWidth': 5} 
        };   

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>



		<div id="chart_div"></div>

         
         </ui:define>
</ui:composition>
